<template>
  <div id="samstoSpecboxModelList">
    <div class="bodyContent">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="form.keyvalue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keyup.enter.native="findList" @search-click="findList" @clear="findList"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findList"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新增" @click="addMethod"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteMethod"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="tableBox">
                <vxe-table ref="tableRef" border="inner" align="left"
                           class="mytable-scrollbar" :loading="showLoading"
                           :data="tableData"
                           :row-config="{ isCurrent: true, isHover: true }"
                           :height="tableHeight"
                           :column-config="{ resizable: true }"
                           @cell-click="tableCellClick"
                           resizable
                           show-overflow>
                  <vxe-column type="checkbox" width="30"></vxe-column>
                  <vxe-column field="descText" title="内容">
                    <template #default="{ row }">
                      <el-link type="primary" :underline="false" @click="editDiagnosTempDescDialog(row)">
                        <span>{{ row.descText }}</span>
                      </el-link>
                    </template>
                  </vxe-column>

                  <vxe-column field="isEnable" title="是否启用" width="100">
                    <template #default="{ row }">
                      <el-tag :type="row.isEnable===1 ? 'success' : 'danger'">{{ row.isEnable===1 ? '是' : '否' }}</el-tag>
                    </template>

                  </vxe-column>
                  <vxe-column field="seq" title="顺序" width="50">
                    <template #default="{ row }">
                      <span>{{ row.seq }}</span>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { reactive, ref, getCurrentInstance, onMounted, watch, PropType } from 'vue';
import request from "@/api";
import { Splitpanes, Pane } from 'splitpanes';
import { VxeColumnPropTypes, VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import type { VxeTableInstance} from 'vxe-table';
import { AppStore } from '@/stores/store';
import {  IsEmpty } from '@/utils/common';
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '' }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const curSelectRow = ref({});
const pCurSelectRow = ref({});
const isPageDisabled = ref(true);
let tableHeight = ref(window.innerHeight - 240);
// 右侧表单:
const activeName = ref('infoForm');
const infoTabPaneDisabled = ref(true);
// 分页
const PageSizeList = [10, 50, 100, 200, 500];
let page = reactive({
  pageIndex: 1,
  pageSize: PageSizeList[0],
  totalResult: 0
});

watch(curSelectRow, (newValue, oldValue) => {
  if (!IsEmpty(newValue.id)){
    isPageDisabled.value=false;
    infoTabPaneDisabled.value=false;
  }else{
    activeName.value="infoForm";
    isPageDisabled.value=true;
    infoTabPaneDisabled.value=true;
  }
});
defineExpose({
  initPage
});
// 父组件传值
let props = defineProps({
  pCurSelectRow: { type: Object as PropType<any>, required: true },
  descType: { type: String as PropType<any>, required: true }
}) as any;
watch(
  () => props.pCurSelectRow,
  (nval, oval) => {
    pCurSelectRow.value=nval;
  },
  {
    deep: true,
    immediate: true
  }
);
// 方法定义区 =============
onMounted(() => {
  findList(); // 获取题库数据
});
function initPage(){
  findList();
}
// 获取表格数据
async function findList() {
  showLoading.value = true;
  curSelectRow.value={};
  tableData.length = 0; //放入数据前清空数据
  let params={
    searchValue: form.keyvalue,
    diagnosType: props.descType,
  }
  //const res: any = await samstoSpecboxModelPagelist({ keywords: form.keyvalue,pageIndex: page.pageIndex, pageSize: page.pageSize })
  const res: any =await request({
    url: '/sta/diagnosTempDesc/findDiagnosTempDescList',
    method: 'get',
    params: params
  });
  console.log(res.data,'resresresresres');
  if (res.status.code == 1) {
    tableData.push(...res.data);
  }
  showLoading.value = false;
}

function deleteMethod() {
  const sltSuppliers = (proxy.$refs.tableRef as any).getCheckboxRecords();
  if (!(sltSuppliers.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    console.log(sltSuppliers,'sltSuppliers');
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(async () => {
        //后台删除数据
        const delDiagnosTempDescList = sltSuppliers;
        console.log(delDiagnosTempDescList,'delDiagnosTempDescList');
        if (delDiagnosTempDescList.length > 0) {
          const data = { diagnosTempDescList: delDiagnosTempDescList };
          const url = '/sta/diagnosTempDesc/batchDeleteDiagnosTempDesc';
          proxy.$http
            .post(url, data)
            .then((res: any) => {
              findList();
              VxeMessage(res.status.msg, VxeNotifyType.success);
            })
            .catch((err: any) => {
              VxeMessage(err, VxeNotifyType.error);
            });
        }
      })
      .catch((err: any) => {
        // VxeMessage(err, VxeNotifyType.error);
      });
  }
}
//分页事件
function handleSizeChange({type, pageIndex, pageSize}: any) {
  if (type === 'size') {
    page.pageIndex = 1;
  } else {
    page.pageIndex = pageIndex;
  }
  page.pageSize = pageSize;
  findList();
}

// 新增
async function addMethod() {
  proxy.$emit('addCell');
}


// 删除
const deleteMethodOLd = async () => {
  const deleteInfo = {
    cancelButtonClass: 'cancel-button',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  };
  if (IsEmpty(curSelectRow.value.id)) {
    VxeMessage('请先选中要删除的项', VxeNotifyType.warning);
    return;
  }
  await proxy.$confirm('确定删除此条数据？', '提示', deleteInfo);
  let param = {
    diagnosTempDescList:[curSelectRow.value]
  };
  const res : any = request({
    url: '/sta/diagnosTempDesc/findDiagnosTempDescList',
    method: 'post',
    data: param
  });
  res.status.code === 1 ? VxeMessage(res.status.msg, VxeNotifyType.success) : VxeMessage(res.status.msg, VxeNotifyType.error);
  await findList();
}

// 表格选中当前行
function tableCellClick({ row }: any) {
  curSelectRow.value = row;
  proxy.$forceUpdate();
  selectItemRows(curSelectRow.value);
}
//选中行后传值给FORM
async function selectItemRows(row) {
  proxy.$emit('clickCell', { row });
  let selectItem=row;
  proxy.$forceUpdate();
}
</script>
<style lang="scss" scoped>
#samstoSpecboxModelList {
  width: 100%;
  height: 100%;
  .bodyContent {
    padding:unset;
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    background-color: $base-white;
    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }
    .tableBox {
      height: calc(100% - 40px);
    }
    .el-tabs {
      border: none;
      height: 100%;
      :deep(.el-tabs__content) {
        padding:0;
        height: calc(100% - 39px);
        .el-tab-pane {
          height: 100%;
        }
        #pane-0 {
          padding:15px;
          height:calc(100% - 30px);
        }
      }
    }
    .bankItemContent{
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
</style>

